<template>

  <el-container style="min-height: 100%; ">
    <el-aside :width="sidewidth+'px'" style="box-shadow: 2px 0 6px rgb(0 21 41/35%);  height:100%">
<Aside :isCollapse="isCollapse" :isTextShow="isTextShow" style="height: 100%"></Aside>

    </el-aside>

    <el-container style="margin-bottom: 40px;height: 100%">
      <el-header style=" border-bottom: 1px solid #ccc;" :pathName="pathName">
     <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse"></Header>
      </el-header>
      <el-main style="height: 100%">
<router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

<!--
   @size-change="handleSizeChange"
              @current-change="handleCurrentChange"-->
</template>

<script>
// @ is an alias to /src

import request from "@/util/request";

import Aside from '@/components/Aside.vue'
import Header from '@/components/Header.vue'
export default {
  name: 'HomeView',

  components:{
    Aside,
    Header
  },
  data() {

    return {

      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sidewidth: 250,
      isTextShow: true,
      pathName:''


    }
  },

  methods: {
    collapse() {
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {
        this.sidewidth = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
        this.isTextShow = false
      } else {
        this.sidewidth = 250
        this.collapseBtnClass = 'el-icon-s-unfold'
        this.isTextShow = true
      }
    },



  }
}
</script>

<style>

html,
body,
#app,
.el-container {
  height: 100%;
}

</style>
